<style>
  #app{display: table;width:100%;}
  body{overflow: hidden;}
 .register .main-title{text-align: center;font-size:16px;font-weight: normal;margin-bottom: 20px;}
.register  .des{text-align: center;color:#999;margin-bottom: 2em;}
 .register .login-form{width:300px;margin:0 auto;}
.register .forgetpay .login-page{width:600px;height:280px;margin:0 auto; padding: 10px 0;margin-top:150px;
    border-radius: 8px;
    background: #fff;}

/*.register  .login_main{    height: 99.8vh;   background: #f7f7f7;
   
    display: flex;

    flex-direction: column;}*/
.register .forgetpay.login_content{   
   height: 99.8vh;   
   background: #f7f7f7;
   width: 100%;
    /*height: 100%;*/
    overflow:hidden;
    position: relative;
    z-index: 1;
   /* display: flex;

    align-items: center;

    justify-content: center;*/
  }
.register .login_content .el-select{width:100%;}
#code{
    font-size: 18px;
    letter-spacing:3px;
    color: #053d84;
    background: #f2f2f5;
}
.register .verify .el-form-item__content{display: flex;align-items: center;}
/*.verify .el-form-item__content>div{width:33.33%;}*/
.register .verify .el-input .el-input__inner{width:140px;}
.register .forget{    background-color: hsla(0,87%,69%,.1);padding:0 10px;    border-radius: 4px;
    box-sizing: border-box;font-size: 12px;height:32px;line-height: 32px;display: inline-block;
    border: 1px solid rgba(64,158,255,.2);
    border-color: hsla(0,87%,69%,.2);
    color: #f56c6c;}
.register .forget a{color:#7e8c8d;}
.register .verification1{display: flex;}
.register .verification1.el-button{border-radius: 0 4px 4px 0;background: #f5f7fa;color:#909399;font-size:14px;}

.register .verify .phoneVerify .el-input__inner{width:100%;border-radius: 4px 0 0 4px;}
.register .el-checkbox-group {text-align: center;}
.register .btn_reg{margin-bottom: 10px;}
.register .service{color:#178fe3;}
</style>
<template>
  <div class="register">
   <!--  <div class="login_main">
      <div class="header_index">
        <myHeader></myHeader>

      </div> -->
      <div class="login_content forgetpay">     

        <div class="g-center login-page" @keyup.enter="findloginpassword">
          <el-form :model="regForm" class="login-form" :rules="regFormRules" ref="regForm">
            <h1 class="main-title">找回资金密码</h1>
               <div v-if="!findpassword" class="forget_info">
                  
                  <el-form-item  prop="mobile">
                    <el-input
                      :autofocus="true"
                      placeholder="请输入手机账号"  @blur="isRegMobile"
                      v-model="regForm.mobile">
                    </el-input>
                  </el-form-item>
               
                  <el-form-item class="verify" prop="mobileCode">
                    <el-input type="text" placeholder="请输入手机验证码" class="phoneVerify" v-model="regForm.mobileCode"></el-input>
                    <el-button v-if="!isSendVerify" @click.native="sendVerify" type="default" class="verification1">发送验证码</el-button>
                    <el-button v-if="isSendVerify" type="default" class="verification1">{{time}}s后重新发送</el-button>

                  </el-form-item>
                 
                  <el-form-item class="btn_reg">
                    <el-button style="width:100%"  @click.native="nextSubmit" type="primary" >下一步</el-button>
                  </el-form-item>   
               </div>     
                <div v-if="findpassword" class="forget_info">
                  
                  <el-form-item  prop="mobile">
                    <el-input
                      :autofocus="true"
                      placeholder="请输入新密码" 
                      v-model="regForm.newpassword">
                    </el-input>
                  </el-form-item>
               
                
                  <el-form-item class="btn_reg">
                    <el-button style="width:100%"  @click.native="findloginpassword" type="primary" :loading="isBtnLoading">确认</el-button>
                  </el-form-item>   
               </div>      
          </el-form>  
        </div>
      </div>
    </div>
   
  </div>
</template>

<script>
import instance from '../api';
import isvalidPhone from '../api/valide';
import * as common from '../api/common';
import md5 from 'js-md5';

import myHeader from './common/header'


var code ; //在全局定义验证码
export default {
  components:{
    myHeader
  },
  data() {
    var validPhone=(rule, value,callback)=>{
      if (!value){
          callback(new Error('请输入电话号码'))
      }else  if (!isvalidPhone.isvalidPhone(value)){
        callback(new Error('请输入正确的11位手机号码'))
      }else{
        // console.log(this.isRegMobile())
        // callback(new Error('该号码已经注册过'))    
        // this.isRegMobile()     
          callback();
          
      }
    };

    return {
      time:60,
      regFormRules:{
        mobile: [
            // { required: true, message: '请输入手机号', trigger: 'blur' }
            { required: true, trigger: 'blur', validator:validPhone }//这里需要用到全局变量

          ],

        mobileCode:[
          { required: true, message: '请输入手机验证码', trigger: 'blur' }

        ],
      },

      regForm:{region:'china',checkCode:'',verifycode:'',type:true,password:'',invitation:''},

      isBtnLoading: false,
      isSendVerify:false,
      isreg:false,
      findpassword:false,

    };
  },
  computed: {
   
  },
  methods: {

    isRegMobile(){
      // let isreg=true;
      if(this.regForm.mobile){
        let para={
          mobile:this.regForm.mobile
        }
        common.validMobileReg.r(para).then((res)=>{
            console.log(res);
            if(res.data.retCode==1){
              if(res.data.data!=null&&res.data.data!='null'&&res.data.data!=''){
                this.isreg= true;
                // callback();
              }else{
                this.isreg= false;               
                 this.$message.error('该号码尚未注册过')

              }
            }else{
              // this.$message.error(res.data.retMsg)
                this.isreg= true;              
            }

          })
      }
   
    },

    sendVerify(){
      if(this.isreg){
        let para={
          mobile:this.regForm.mobile,
          verifyCode:this.regForm.verifycode
        }
        console.log(para)
        common.sendVerify.r(para).then((res)=>{
          console.log(res);
          if(res.data.retCode==1){
            this.$message.success("验证码发送成功")
            
            this.isSendVerify=true;

            let vm=this;
            let interval = setInterval(function() {
            if ((vm.time--) <= 0) {
              vm.time = 60;
              vm.isSendVerify = false;
              clearInterval(interval);
             }
            }, 1000);


          }else{
            this.$message(res.data.retMsg);
          }
        })
      }else{
        this.$message.error("该号码尚未注册过")
      }
     
    },
    nextSubmit(){
      this.$refs.regForm.validate((valid) => {
        if (valid) {
          if(!this.isreg){
             this.$message.error("该号码尚未注册过");
            return;
          }
         /* if(!this.isSendVerify){
            this.$message.error("请发送手机验证码");
            return;
          }    */    
         this.findpassword=true;
        }else{
          console.log('error submit!!');
          return false;
        }

      })
    },
    findloginpassword() {
      var vm = this;
      this.$refs.regForm.validate((valid) => {
        if (valid) {
          if(this.findpassword){
             let para={
                mobile:this.regForm.mobile,
                password:md5('STARSAND_' + this.regForm.newpassword),
                mobileCode:this.regForm.mobileCode,
              }
              console.log(para);
              common.findPayPassword.r(para).then((res)=>{
                console.log(res);
                if(res.data.retCode==1){
                  this.$message("密码修改成功")


                  this.$router.push('/personalcenter');
                }else{
                  this.$message.error(res.data.retMsg)
                }
              })
          }
       
        }else{
          console.log('error submit!!');
          return false;
        }

      })


    }
  },
  created() {

  }
};
</script>
